<template>
	<view class="chart-box" >
		<!-- 选择日期 -->
		<view class="chart-tools" v-if="showTools">
			<view class="dateTypes">
				<text
					v-for="(item, index) in dateTypeArr"
					:key="index"
					class="type"
					:class="index==dateTypeOn?'active':''"
					@click="dateTypeClick(index)"
				>
					{{item}}
				</text>
			</view>
			<!-- 日期为月时, 显示日期选择器 -->
			<view class="date" v-show="dateTypeOn==0">
				<!-- 日期选择器 -->
				<picker @change="datePickerChange" :value="datePickerIndex" :range="datePickerArr">
					<view class="picker">
					  <text class="iconfont iconfont-date"></text>
					  <text>{{datePickerArr[datePickerOn]}}</text>
					  <text class="iconfont iconfont-arrow-down"></text>
					</view>
				  </picker>
			</view>
		</view>
		<!-- 图表名称 -->
		<view class="chart-title" v-show="showChart">
			{{chartParams.title}}
		</view>
		<!-- x轴单位 -->
		<view class="chart-unit blue" v-show="showChart">
			({{chartParams.unit}})
		</view>
		<uCharts
			:showChart="showChart"
			:chartType="chartParams.chartType"
			:opts="chartParams.opts"
			:cWidth="cWidth"
			:cHeight="cHeight"
			ref="uchartTools"
		></uCharts>
	</view>
</template>

<script>
	import uCharts from './component.vue';
	export default {
		props: {
			showTools: { // 是否显示日期选择
				type: Boolean,
				default: true
			},
			showChart: { // 是否显示图表部分
				type: Boolean,
				default: true
			},
			chartParams: { // 图表参数
				type: Object,
				default: () => {
					return {}
				}
			},
			dateTypeArr: { // 日期类型
				type: Array,
				default: () => {
					return ['月','年']
				}
			},
			dateTypeIndex: { // 日期下标
				type: Number,
				default: 0
			},
			datePickerArr: { // 日期选择器
				type: Array,
				default: () => {
					return ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
				}
			},
			datePickerIndex: { // 日期选择器 下标
				type: Number,
				default: 0
			},
			cWidth: {
				default: 335,
			},
			cHeight: {
				default: 250,
			},
		},
		components: {
			uCharts
		},
		watch: {
			datePickerIndex(val) {
				this.setMaxDateIndex();
			},
			datePickerArr(val) {
				this.setMaxDateIndex();
			}
		},
		data() {
			return {
				dateTypeOn: this.dateTypeIndex,
				datePickerOn: this.datePickerIndex
			}
		},
		methods: {
			// 下标溢出时, 选择最后一个
			setMaxDateIndex() {
				if(this.datePickerIndex > this.datePickerArr.length - 1) {
					this.datePickerOn = this.datePickerArr.length - 1;
				}
			},
			// 选择日期类型
			dateTypeClick(i) {
				this.dateTypeOn = i;
				this.$emit('dateTypeClick', i);
			},
			// 监听滚动选择器
			datePickerChange(e) {
				this.datePickerOn = e.detail.value;
				this.$emit('datePickerChange', this.datePickerOn)
			}
		}
	};
</script>

<style scoped lang="scss">
	.chart-box {
		margin-bottom: 20upx;
		padding: $uni-spacing-20;
		background-color: $uni-color-white;
		border-radius: $uni-border-radius-base;
		uni-canvas {
			background-color: $uni-color-white;
		}
		.chart-unit {
			padding: 0 $uni-spacing-20 $uni-spacing-20;
		}
	}
</style>